import React from 'react';

/**
*
*
onClick={this.chanageStateHandler(1)} //这种情况下，初始化页面上，就自动执行了，不是期望的，需要改成如下：

onClick={(e) => this.chanageStateHandler(1)} 

**/
class EventHandlerComponent extends React.Component{

    //构建器 初始化
	constructor(props){
		super(props);
		this.state={
			isToggleOn: true
		};
		 // This binding is necessary to make `this` work in the callback
		this.eventHandler= this.changeStatus.bind(this);
	}

	changeStatus(e,id){
			e.preventDefault();//禁止默认行为,超链接不会触发跳转
			//设置state
			this.setState((state,props)=>{
				return (
						{
							isToggleOn :!state.isToggleOn
						}
					);
			});
			console.log("clicked="+id);
	}
	render (){
		return (
				<a href="#"  onClick={(e) => this.eventHandler(e,3)}> {this.state.isToggleOn? "ON":"OFF"}</a>
			);
		
	}
}

export default EventHandlerComponent;